<template>
    <div>
      <div id="top">
        <div id="topBar">
          <router-link :to="{path:'/me'}"><van-icon name="arrow-left" style="float: left;margin-top: 0.5rem;margin-left: 0.5rem"/>
            <p style="float: left">反馈</p></router-link>
        </div>
      </div>
      <div id="mid">
        <p id="guess">猜你想问</p>
        <ul>
          <li :class="{'active':hot}">热门问题</li>
          <li :class="{'active':points}">积分问题</li>
          <li :class="{'active':exchange}">兑换问题</li>
        </ul>
        <div id="list">
        <div class="item" v-for="item in list">
          {{item}}
        </div>
        </div>
          <p style="font-size: 0.9rem">不是这些问题</p>
      </div>
      <div id="footer">
      <router-link :to="{path:'/me/feedback/suggest'}"><div id="suggest">投诉与建议</div></router-link>
      </div>
    </div>
</template>

<script>
    export default {
        name: "suggest",
        data(){
          return{
            hot:true,
            points:false,
            exchange:false,
            list:[
              '啦啦','哈哈','啦啦','哈哈','lala'
            ]
            }
          }
        }

</script>

<style scoped>
  #top{
    width: 100%;
    height:3rem;
    background: red;
    overflow: hidden;
    position: relative;
  }
  #topBar{
    height: 2rem;
    width: 100%;
    line-height: 2rem;
    background: papayawhip;
    color:black;
    font-size: 1rem;
    margin-top: 1rem;
  }
  #topBar p{
    display: inline-block;
  }
  #mid{
    height: 29rem;
    background:papayawhip;
    padding: 2rem 0.5rem;
    box-sizing: border-box;
  }
  #guess{
    font-size: 1rem;
    color: #39a9ed;
    width: auto;
    text-align: left;
    margin-left: 1rem;
  }
  li{
    height: 2rem;
    width: 33%;
    float: left;
    line-height: 2rem;
    margin-top: 1rem;
    font-size: 0.8rem;
    color: #39a9ed;
  }
  .active{
    border-bottom: #39a9ed solid 0.15rem;
  }
  #list{
    height: 16rem;
    background: #ee4949;
    margin-top: 4rem;
  }
  .item{
    height: 3rem;
    background: #39a9ed;
    box-sizing: border-box;
    border-bottom: #999999 solid 0.15rem;
    line-height: 3rem;
    text-align: left;
    font-size: 1rem;
    width: 80%;
    margin: 0 auto;
  }
  #suggest{
    height: 3rem;
    width: 90%;
    margin: 0 auto;
    border: #39a9ed solid 0.1rem;
    box-sizing: border-box;
    font-size: 1rem;
    line-height: 3rem;
    color: #39a9ed;
    border-radius: 0.5rem;
  }
</style>
